<template>
  <el-container>
    <el-header>管理员列表</el-header>
    <el-main>
      <el-header style="display: flex; justify-content: space-around">
        <div style="display: flex">
          状态：
          <div>
            <el-input
              v-model="name"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </div>
        </div>
        <div style="display: flex">
          搜索
          <div class="box">
            <el-input v-model="text1" placeholder="请输入姓名或者账号" clearable></el-input>
          </div>
          <div>
            <el-button type="primary" @click="dian">
              <i class="el-icon-search"></i>
            </el-button>
          </div>
        </div>
      </el-header>

      <el-header>
        <el-button type="primary" @click="dian">
          <i class="el-icon-plus"></i>
          添加管理员</el-button
        >
      </el-header>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="real_name"
          label="姓名"
          min-width="120"
        ></el-table-column>

        <el-table-column
          prop="account"
          label="账号"
          min-width="120"
        ></el-table-column>

        <el-table-column prop="roles" label="身份" min-width="250">
          <template slot-scope="scope">
            <div v-for="(v, i) in scope.row.roles" :key="i">
              <el-tag size="small">{{ v }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="last_time"
          label="最后一次登录时间"
          min-width="160"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.last_time == null"></p>
            <p v-else>{{ (scope.row.last_time * 1000) | time }}</p>
          </template>
        </el-table-column>

        <el-table-column
          prop="last_ip"
          label="最后一次登录ip"
          min-width="160"
        ></el-table-column>

        <el-table-column prop="status" label="开启" min-width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="bian(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="200" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <Motai :data-list="form" @add="addUser" @edit="editUser"></Motai>
    </el-main>
  </el-container>
</template>

<script>
import { Table, useStatus, del, add, edit } from "../api/AdministratorList";
import moment from "moment";
import Motai from "../components/AdministratorList/Motai";
export default {
  components: {
    Motai,
  },
  data() {
    return {
      name: "",
      text1: "",
      text2: "",
      tableData: [],
      form: {
        type: false,
        id: "",
        account: "",
        pwd: "",
        conf_pwd: "",
        real_name: "",
        roles: [],
        status: 1,
      },
    };
  },
  filters: {
    time: function (val) {
      return moment(val).format("YYYY-MM-DD");
    },
  },
  created() {
    Table({ page: 1, limit: "20" }).then((res) => {
      console.log(res.data);
      res.data.data.list.map((v) => {
        v.roles = v.roles.split(",");
      });
      this.tableData = res.data.data.list;
    });
  },

  methods: {
    editUser(val) {
      console.log(val);
    },
    addUser(val) {
      console.log(val);
      add({
        account: val.account,
        pwd: val.pwd,
        conf_pwd: val.conf_pwd,
        real_name: val.real_name,
        roles: val.roles,
        status: val.status,
      }).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          Table({ page: 1, limit: "20" }).then((res) => {
            console.log(res.data);
            res.data.data.list.map((v) => {
              v.roles = v.roles.split(",");
            });
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    bian(val) {
      console.log(val);
      useStatus({ id: val.id, status: val.status }).then((res) => {
        console.log(res.data);
      });
    },
    dian() {
      this.form.type = true;
      this.id = "";
      this.form.account = "";
      this.form.pwd = "";
      this.form.conf_pwd = "";
      this.form.real_name = "";
      this.form.roles = "";
      this.form.status = 1;
    },
    handleEdit(index, row) {
      this.form.type = true;
      this.form.id = row.id;
      this.form.account = row.account;
      this.form.real_name = row.real_name;
      this.form.roles = row.roles;
      this.form.status = row.status;
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      del({ id: row.id }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({ page: 1, limit: "20" }).then((res) => {
            console.log(res.data);
            res.data.data.list.map((v) => {
              v.roles = v.roles.split(",");
            });
            this.tableData = res.data.data.list;
          });
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #b3c0d1;
  color: #333;
  //   line-height: 160px;
}
.box {
  width: 200px;
  margin: 0 10px;
}
</style>